<template>
  <el-table :data="tableData" v-bind="$attrs" :header-cell-style="headerCellStyle" :max-height="tableHeight" ref="tableRef">
    <el-table-column v-if="isSelection" type="selection" align="center"/>
    <el-table-column v-if="isIndex" label="序号" type="index" width="55" align="center"/>
    <el-table-column v-for="(item,index) in tableColumn"
                     :label="item.label"
                     :prop="item.prop"
                     :key="index"
                     :sortable="item.sortable ?? false"
                     :show-overflow-tooltip="item.showOverflowTooltip ?? true"
                     :width="item.width ?? ''"
                     :fixed="item.fixed ?? false"
                     :align="item.align || 'center'">
      <template #default="{row}">
        <div v-if="item.render" v-html="item.render(row)"></div>
        <slot v-else-if="item.slotName" :name="item.slotName" :row="row"></slot>
        <div v-else>{{ row[item.prop] ?? '-' }}</div>
      </template>
    </el-table-column>
    <el-table-column label="操作" width="180" align="center" v-if="isOperation" fixed="right">
      <template #header>
        <el-icon @click="columnOperation" style="cursor: pointer">
          <Menu/>
        </el-icon>
      </template>
      <template #default="{row}">
        <slot name="operation" :row="row"></slot>
      </template>
    </el-table-column>
  </el-table>
    <el-pagination
        class="mt-5 flex justify-end"
        v-model:current-page="pagination.currentPage"
        v-model:page-size="pagination.pageSize"
        :page-sizes="[5, 10, 20, 30]"
        layout="total,  prev, pager, next,sizes, jumper"
        :total="pagination.total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
    />
</template>

<script lang="ts" setup generic="T extends Array<any>,U extends columnType[]">
import {computed, onUpdated, ref} from 'vue'
const headerCellStyle = ref({
  backgroundColor: '#F5F7FA',
  color: '#34446E',
  fontWeight: 'normal',
  fontSize: '14px',
  padding: '10px 0',
  borderColor: '#f7f7f7'
})
defineOptions({
  name: 'FTable'
})
const tableHeight = computed(()=>{
  return document.documentElement.clientHeight - 280
})
const tableRef = ref()
onUpdated(()=>{
  tableRef.value?.doLayout()
})
interface columnType {
  label: string
  prop?: string
  slotName?: string
  render?: any
  sortable?: string
  showOverflowTooltip?: boolean
  width?: string
  fixed?: string
  align?: string
  [key: string]: any
}

interface paginationType {
  total: number,
  currentPage: number,
  pageSize: number
}

const props = withDefaults(defineProps<{
  tableData: T
  isSelection?: boolean
  isIndex?: boolean
  isOperation?: boolean
  pagination: paginationType
  tableColumn: U,

}>(), {
  isSelection: false,
  isIndex: false,
  isOperation: true,
  pagination: () => ({
    total: 0,
    currentPage: 1,
    pageSize: 10
  })
})

const emit = defineEmits<{
  (e: 'change', val?: paginationType): void
}>()
const handleSizeChange = () => {
  emit('change')
}
const handleCurrentChange = () => {
  emit('change')
}

function columnOperation() {

}
</script>

<style scoped lang="scss">
</style>

